import 'package:flutter/material.dart';
import 'pages/home.dart';
import 'pages/contact.dart';
import 'pages/find.dart';
import 'pages/mine.dart';
//编写时我们继承自StatefulWidget，因为内部会更新状态
class IndexPage extends StatefulWidget {
  const IndexPage({Key? key}) : super(key: key);

  @override
  State<IndexPage> createState() => _IndexPageState();
}

class _IndexPageState extends State<IndexPage> {
  //初始化pagecontroller，用来控制page页面
  List<BottomNavigationBarItem> navgationBarItems = [
          BottomNavigationBarItem(
              label: "聊天",
              icon: Image.asset('images/navbar/home_icon.png',
                  width: 20,
                  height: 20
              ),
              activeIcon: Image.asset('images/navbar/home_icon_a.png',
                  width: 20,
                  height: 20
              )
          ),
          BottomNavigationBarItem(
              label: "联系人",
              icon: Image.asset('images/navbar/msg_icon.png',
                  width: 20,
                  height: 20
              ),
              activeIcon: Image.asset('images/navbar/msg_icon_a.png',
                  width: 20,
                  height: 20
              )
          ),
          BottomNavigationBarItem(
              label: "发现",
              icon: Image.asset('images/navbar/cate_icon.png',
                  width: 20,
                  height: 20
              ),
              activeIcon: Image.asset('images/navbar/cate_icon_a.png',
                  width: 20,
                  height: 20
              )
          ),
          BottomNavigationBarItem(
            label: "我的",
              icon: Image.asset('images/navbar/mine_icon.png',
                  width: 20,
                  height: 20
              ),
              activeIcon: Image.asset('images/navbar/mine_icon_a.png',
                  width: 20,
                  height: 20
              )
          )
        ];
  final _controller = PageController(
    initialPage: 0
  );

  void _navigationBarTap(int index){
    setState(() {
            _pageIndex = index;
          });
          //除了更新bottombar图标，还要更新显示哪个页面
          _controller.jumpToPage(index);
  }
  //声明到这里，可以默认保存，避免内次切换都要重新初始化,如果想重新初始化，可以特殊处理
  int _pageIndex = 0;
  
  @override
  Widget build(BuildContext context) {
    //每开始一个新界面都需要使用Scaffold进行包括，其包含着 appbar和bottombar的设置
    return Scaffold(
      //这是一个 Widget 类型，可以自定义 tabbar，这里使用系统的来测试
      bottomNavigationBar: BottomNavigationBar(
        //设置当前的index
        currentIndex: _pageIndex,
        //点击后可以用来 index 的选中效果，通过更新页面跳转
        onTap: (index)=>_navigationBarTap(index),
        //设置了默认会显示字体，否则只有选中的才显示字体
        unselectedItemColor: Colors.black,
        selectedItemColor: Colors.red,
        //设置为混合类型，默认未选中只显示一个icon图片
        type: BottomNavigationBarType.fixed,
        selectedFontSize: 12,
        unselectedFontSize: 12,
        //设置里面组件
        items: navgationBarItems,
      ),
      body: PageView(
        controller: _controller,
        //不设置默认可以左右活动，如果不想左右滑动如下设置，可以根据ios或者android来设置
        // physics: const NeverScrollableScrollPhysics(),
        //界面切换后的回调，主要是针对android左右滑动回调，此时与bottombar无关了
        onPageChanged: (int index) {
          setState(() {
            _pageIndex = index;
          });
        },
        //设置我们要切换的页面，放到一个数组
        children: const [
          homePage(),
          contactPage(),
          findPage(),
          minePage()
        ],
      ),
    );
  }
}
